@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$global-prefix: ngm;
$prefix: (ngm, story-designer);

@function get-unthemable-tokens() {
  @return (
    container-rounded: var(--#{$global-prefix}-primary-container-rounded)
  );
}

@function get-color-tokens() {
  @return (
    color-surface: var(--#{$global-prefix}-color-surface),
    color-surface-container: var(--#{$global-prefix}-color-surface-container),
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

:host {
  @include token-utils.create-token-values($prefix, get-token-slots());
  --story-fullscreen-top: 0;
  @apply relative flex-1 flex max-w-full overflow-hidden;

  &.ngm-story--fullscreen:not(.editable) {
    .ngm-story__toolbar {
      @apply opacity-0 transition-all duration-200 ease-in-out;

      &:hover {
        opacity: 1;
        top: 0;
      }
    }
  }

  &.ngm-story--fullscreen {
    top: var(--story-fullscreen-top);
    @apply z-50 fixed w-full h-full left-0 transition-all duration-200 ease-in-out;
  }
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  :host {
    border-top-left-radius: var(#{token-utils.get-token-variable(container-rounded)});
    overflow: hidden;
  }
}

.ngm-story__container-content {
  @apply overflow-hidden flex flex-col gap-2;

  &.EmulatedDevice {
    .ngm-story__device {
      max-height: calc(100% - 1.5rem);
      @apply px-2;

      .ngm-story__device-content {
        @apply mb-4;
      }
    }
  }

  .ngm-story--add-story-point {
    position: absolute;
    top: 5px;
    right: 5rem;
    z-index: 1;
  }

  .ngm-story--filter-list {
    position: absolute;
    top: 5px;
    right: 3rem;
    z-index: 1;
  }
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  padding: 0;
}

.toolbar-container.pin {
  @apply w-16;
}

.ngm-story__toolbar {
  &.pac-toolbar__expand-less {
    @apply bottom-8;
  }

  &:not(.pin) {
    @apply left-4 top-8 rounded-2xl z-10;
  }
  &.pin {
    @apply left-0 top-0 h-full;
  }
}

.pac-cdk__drag-handle {
  @apply cursor-move;
}

.ngm-story--point-hidden {
  text-decoration: line-through;
}

.pac-story__error {
  position: absolute;
  margin: auto;
  top: 50%;
}

.ngm-story__settings-container {
  flex: 1;
  max-height: 100%;
}

.mat-mdc-tab-group {
  flex: 1;
  max-width: 100%;
}

.ngm-story__device-size-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  min-height: 1rem;
  text-align: center;

  .layout-size {
    display: flex;
    height: 1rem;
    opacity: 0.5;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 2px solid;

    background-color: var(--ngm-color-surface);
    border-color: var(--ngm-color-outline);

    &:hover,
    &.hover {
      opacity: 1;
    }
  }

  .layout-size__label {
    position: absolute;
    font-size: 12px;
    pointer-events: none;
  }
}

.ngm-story__designer-drawer.mat-drawer-side.mat-drawer-end {
  @apply border-l-0;
}

.ngm-story__quick-start-widget {
  @apply w-80 text-2xl p-8 flex justify-center items-center cursor-pointer rounded-lg whitespace-nowrap border-2 border-dashed
    transition-opacity
    active:shadow-lg;
  @apply sm:p-16;
  background-color: var(--ngm-color-surface-container-low);
  border-color: var(--ngm-color-outline);
  opacity: .5;

  &:hover {
    background-color: var(--ngm-color-surface-container-high);
    font-weight: 600;
    opacity: 1;
  }
}

:host::ng-deep {
  .pac-story-calculations {
    @apply absolute top-0 left-0 w-full h-full z-10;
  }
}

::ng-deep {
  // Story designer pannel
  .mat-drawer.ngm-story__designer-drawer {
    .mat-drawer-inner-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
}
